<template>
  <div class="login">
    <el-form :model="form" class="form"  :rules="rules">
      <img src="../../assets/common/login-logo.png" alt="" />
      <el-form-item prop="name">
        <el-input
          v-model="form.name"
          prefix-icon="el-icon-user-solid"
          placeholder="username"
        >
        </el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          v-model="form.password"
          prefix-icon="el-icon-lock"
          suffix-icon="el-icon-view"
        >
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button class="btn">点击登录</el-button>
      </el-form-item>
      <el-link type="info">还没注册？点击注册</el-link>
    </el-form>
  </div>
</template>
<script>
export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (this.form.checkPass !== '') {
          this.$refs.form.validateField('checkPass')
        }
        callback()
      }
    }
    return {
      form: { name: '', password: '' },
      rules: {
        name: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
        password: [{ validator: validatePass, trigger: 'blur' }]
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.login {
  background: url('~@/assets/common/login.jpg');
  height: 100%;
  background-position: center; // 将图片位置设置为充满整个屏幕
  display: flex;
  justify-content: center;
  align-items: center;

  .form {
    ::v-deep .el-input__inner {
      background-color: #d2e4ff;
      padding-top: 25px;
      padding-bottom: 25px;
    }
    img {
      margin-bottom: 50px;
    }
    .btn {
      width: 100%;
      background-color: #407ffe;
      color: #fff;
      border: none;
      padding-top: 25px;
      padding-bottom: 25px;
    }
    .el-link--info {
      margin-left: 150px;
      color: #fff;
    }
  }
}
</style>
